<!-- 办理详情 -->
<template>
  <div class="box-content">
    <div class="basic-box">
      <div class="box-left" :style="{ width: leftWidth + '%' }">
        <div class="form-box">
          <sectionTitle>基本信息</sectionTitle>
          <a-row class="proposal-detail-from-item">
            <a-col :span="24">
              <label class="item-label">题目：</label>
              <span
                >春运来了,湖南铁路织密疫情防控网1春运来了,湖南铁路织密疫情防控网1</span
              >
            </a-col>
          </a-row>
          <a-row class="proposal-detail-from-item">
            <a-col :span="12">
              <label class="item-label">所属届次：</label>
              <span>十四届四次1</span>
            </a-col>
            <a-col :span="12">
              <label class="item-label">会中提案： </label>
              <span> 否</span>
            </a-col>
          </a-row>
          <sectionTitle>提案者信息</sectionTitle>
          <a-row class="proposal-detail-from-item">
            <a-col :span="12">
              <label class="item-label">提案者：</label>
              <span>李小松</span>
            </a-col>
            <a-col :span="12">
              <label class="item-label">提案者类型：</label>
              <span> 个人</span>
            </a-col>
          </a-row>
          <a-row class="proposal-detail-from-item">
            <a-col :span="12">
              <label class="item-label">界别：</label>
              <span>中国国民党革命委员会</span>
            </a-col>
            <a-col :span="12">
              <label class="item-label">党派：</label>
              <span> 中国国民党革命委员会</span>
            </a-col>
          </a-row>
          <a-row class="proposal-detail-from-item">
            <a-col :span="24">
              <label class="item-label">联系地址：</label>
              <span>合肥市</span>
            </a-col>
          </a-row>
          <a-row class="proposal-detail-from-item">
            <a-col :span="24">
              <label class="item-label">联系电话：</label>
              <span>15056060557</span>
            </a-col>
          </a-row>
          <a-row class="proposal-detail-from-item">
            <a-col :span="24">
              <label class="item-label">联名人：</label>
              <span>无</span>
            </a-col>
          </a-row>
          <sectionTitle>提案内容</sectionTitle>
          <a-row class="proposal-detail-from-item">
            <a-col :span="24">
              <a-textarea
                :rows="8"
                style="
                  height: 400px;
                  font-size: 20px;
                  margin-top: 0px;
                  margin-bottom: 0px;
                "
                v-model="textareaVal"
                readonly="readonly"
              />
            </a-col>
          </a-row>
          <a-row class="proposal-detail-from-item">
            <h3><i class="suncnui suncnui-icon-fujian"></i>附件</h3>
            <a-col :span="24">
              <a-upload
                action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                :multiple="true"
                :file-list="fileList"
              >
              </a-upload>
            </a-col>
          </a-row>
        </div>
      </div>
      <div class="box-right" :style="{ width: rightWidth + '%' }">
        <i
          @click="changeWidth"
          :class="iocnClass"
          class="suncnui contraction-btn"
        ></i>
        <div class="form">
          <div class="form-content">
            <a-form-model
              :model="form"
              :rules="rules"
              :label-col="{ span: 6 }"
              :wrapper-col="{ span: 18 }"
            >
              <sectionTitle>办理答复</sectionTitle>
              <a-form-model-item label="办理类型">
                <span>{{ form.managementType }}</span>
              </a-form-model-item>
              <a-form-model-item label="签收时间">
                <span>{{ form.signingTime }}</span>
              </a-form-model-item>
              <a-form-model-item label="处理方式">
                <a-checkbox-group
                  :options="dealOptions"
                  v-model="form.dealWay"
                />
              </a-form-model-item>
              <a-form-model-item label="办理程度">
                <a-radio-group v-model="form.dealLevel">
                  <a-radio :value="1">A</a-radio>
                  <a-radio :value="2">B</a-radio>
                  <a-radio :value="3">C</a-radio>
                </a-radio-group>
              </a-form-model-item>
              <a-form-model-item label="短信提醒">
                <a-switch
                  v-model="form.messageAlert"
                  checked-children="开"
                  un-checked-children="关"
                  default-checked
                />
              </a-form-model-item>
              <a-form-model-item label="答复内容">
                <a-textarea
                  v-model="form.replylContent"
                  placeholder="请输入答复内容"
                  :rows="8"
                  style="height: 250px"
                />
              </a-form-model-item>
              <a-row class="proposal-detail-from-item">
                <h3>
                  <i class="suncnui suncnui-icon-fujian"></i
                  >答复函：支持上传doc，docx，pdf，wps格式的文档
                </h3>
                <a-col :span="24">
                  <a-upload
                    action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                    :multiple="true"
                    :file-list="fileList"
                  >
                    <a-button v-if="fileList.length == 0">
                      <a-icon type="upload" />选择文件</a-button
                    >
                  </a-upload>
                </a-col>
              </a-row>
            </a-form-model>
          </div>
          <div class="form-footer">
            <a-button type="primary" @click="handleAduit"> 提交审核 </a-button>
            <a-button style="margin-left: 14px" @click="$router.back()">
              暂存
            </a-button>
            <a-button style="margin-left: 14px" @click="$router.back()">
              返回
            </a-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import changeWidth from 'mixins/change-width'
import sectionTitle from 'components/base/sectionTitle'
export default {
  components: { sectionTitle },
  data() {
    return {
      dealOptions: [
        { label: '电话', value: '电话' },
        { label: '面商', value: '面商' },
        { label: '座谈', value: '座谈' },
        { label: '调研', value: '调研' },
        { label: '网络', value: '网络' },
        { label: '信函', value: '信函' },
        { label: '其他', value: '其他' }
      ],
      textareaVal: 'asd',
      id: '',
      records: {},
      form: {
        signingTime: '2021-03-12 11:46',
        managementType: '主办',
        dealWay: undefined,
        dealLevel: 1,
        messageAlert: false,
        replylContent: ''
      },
      rules: {
        status: [{ required: true, trigger: 'change' }],
        suggestions: [{ required: true, trigger: 'change' }],
        strCheckResultState: [{ required: true, trigger: 'change' }]
      },
      fileList: [
        {
          uid: '-1',
          name: 'xxx.png',
          status: 'done',
          url: 'http://www.baidu.com/xxx.png'
        }
      ],
      choiceVisible: false
    }
  },
  mixins: [changeWidth],
  computed: {},
  watch: {},
  mounted() {},
  methods: {
    //审核确定回调
    handleAduit() {}
  },
  created() {}
}
</script>
<style lang='less' scoped>
.box-content {
  padding: 15px;
  box-sizing: border-box;
  background: #fff;
}
.form {
  padding: 0;
  position: relative;
  height: 100%;
  overflow: hidden;
  /deep/.ant-form-item {
    padding: 5px 0px;
    min-height: 40px;
  }
  /deep/.form-label-text .ant-form-item label {
    color: #919191;
  }
  /deep/.no-label .ant-form-item-control-wrapper {
    width: 100% !important;
  }
}
.label-title {
  font-size: 14px;
  color: #555555;
  font-weight: bold;
}
.form-content {
  height: 100%;
  overflow: auto;
  padding-bottom: 100px;
}
.form-footer {
  position: absolute;
  width: 100%;
  bottom: 0px;
  right: 0px;
  height: 80px;
  background: url('../../../../assets/images/bg-ico.png');
  box-sizing: border-box;
  z-index: 9999999;
  text-align: center;
  // line-height: 115px;
}
.box-right {
  overflow: initial;
  padding: 0 15px;
  box-sizing: border-box;
  transition: width 1s;
}
.box-left {
  padding: 0;
  transition: width 1s;
}
.contraction-btn {
  height: 30px;
  line-height: 30px;
  background: @base-color;
  padding: 0 18px;
  color: #fff;
  white-space: nowrap;
  text-align: center;
  font-size: 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  display: block;
  width: 60px;
  position: absolute;
  top: 0px;
  left: -60px;
}
/deep/ .ant-select {
  color: #333;
  box-sizing: border-box;
  height: 40px;
  line-height: 40px;
}
/deep/ .ant-select-selection {
  border-radius: 2px;
  height: 40px;
}
/deep/ .ant-select-selection__rendered {
  line-height: 38px;
}
.item-label {
  color: #919191 !important;
}
.form-box {
  font-size: 16px;
  padding: 15px 15px;
  overflow-y: auto;
  height: 100%;
  box-sizing: border-box;
}
.proposal-detail-from-item {
  position: relative;
  overflow: hidden;
  padding: 15px 0px;
  box-sizing: border-box;
  line-height: 1.5;
  span {
    color: #000000;
  }
  h3 {
    font-size: 14px;
    color: #555555;
    font-weight: bold;
    margin-bottom: 20px;
    margin-top: 20px;
  }
}
</style>